<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>暖暖动听 | 后台</title>
    <link rel="stylesheet" th:href="@{/css/vegas.min.css}">
    <link th:href="@{/css/login.css}" rel="stylesheet" />
    <style type="text/css">
        .mr{
            margin-right: 10px;
        }
        .errorinfo{
            margin-bottom: 12px;
            color: #ff0000;
            position: absolute;
            top: 280px;
            left: 50%;
            margin-left: -80px;
            z-index: 9;
        }
        .login-code-img{
            width: 118px;
            height: 38px;
            padding: 2px;
            position: relative;
            float: right;
            margin-top: -42px;
            z-index: 1;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>

<body>
<div id="app" class="y-wrap">
    <div class="content">
        <div class="wrap">
            <!--    /*包裹所有元素的容器*/-->
            <div class="cube">
                <!--前面图片 -->
                <div class="out_front">
                    <img th:src="@{/images/photos/1.jpg}" class="pic"/>
                </div>
                <!--后面图片 -->
                <div class="out_back">
                    <img th:src="@{/images/photos/2.jpg}" class="pic"/>
                </div>
                <!--左图片 -->
                <div class="out_left">
                    <img th:src="@{/images/photos/3.jpg}" class="pic"/>
                </div>
                <div class="out_right">
                    <img th:src="@{/images/photos/4.jpg}" class="pic"/>
                </div>
                <div class="out_top">
                    <img th:src="@{/images/photos/5.jpg}" class="pic"/>
                </div>
                <div class="out_bottom">
                    <img th:src="@{/images/photos/6.jpg}" class="pic"/>
                </div>
                <!--小正方体 -->
                <span class="in_front">
                <img th:src="@{/images/photos/7.jpg}" class="in_pic"/>
            </span>
                <span class="in_back">
                 <img th:src="@{/images/photos/8.jpg}" class="in_pic"/>
            </span>
                <span class="in_left">
                <img th:src="@{/images/photos/9.jpg}" class="in_pic"/>
            </span>
                <span class="in_right">
                <img th:src="@{/images/photos/10.jpg}" class="in_pic"/>
            </span>
                <span class="in_top">
                <img th:src="@{/images/photos/11.jpg}" class="in_pic"/>
            </span>
                <span class="in_bottom">
                <img th:src="@{/images/photos/12.jpg}" class="in_pic"/>
            </span>
            </div>
        </div>
        <a class="logo-wrap" href="/"> <img th:src="@{/images/logo/logo-0.png}" /></a>
        <div class="slogan-wrap">
            <img th:src="@{/images/logo/login_bg.png}" alt="">
        </div>
        <div class="loginBox">
            <a href="/"><img class="logo-l" th:src="@{/images/logo/logo-3.jpg}"/></a>
            <div class="login-type">
                <div class="baseLogin">
                    <form th:action="@{/login}" method="post">
                         <input type='hidden' name='uuid' v-model="form.uuid" />
                        <div class="input-field">
                            <input type="text" name="username" v-model="form.username"
                                   autocomplete="off" spellcheck="false" placeholder="用户名">
                        </div>

                        <div class="input-field phone-code">
                            <input type="password" name="password" v-model="form.password"
                                   autocomplete="off" spellcheck="false" placeholder="密码">
                        </div>
                        <div class="input-field verification">
                            <input type="text" name="code" v-model="form.code" placeholder="验证码">
                            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
                        </div>
                        <input type="submit" name="submitBtn" class="action-btn" value="登录">
                       <!-- <button type="submit"  class="action-btn" >登录</button>-->
                    </form>
                    <ul class="sns-login">
                        <!--<a class="mr" th:href="@{/login/gitee}"><li class="sns wechat-login" > <span>微信</span> </li></a>
                        <a class="mr" th:href="@{/login/qq}"><li class="sns qq-login" ><span>QQ</span></li></a>
                        <a class="mr" th:href="@{/login/github}"><li class="sns github-login" > <span>Github</span> </li></a>-->
                        <a class="mr" th:href="@{/login/gitee}"><li class="sns " > <span>微信</span> </li></a>
                        <a class="mr" th:href="@{/login/qq}"><li class="sns " ><span>QQ</span></li></a>
                        <a class="mr" th:href="@{/login/github}"><li class="sns " > <span>Github</span> </li></a>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/vegas.min.js}"></script>
<script type="text/javascript" th:src="@{/js/loginvega.js}"></script>
<script th:inline="javascript">
    var vm = new Vue({
        el : '#app',
        data : {
            form:{
                username:'',
                password:'',
                uuid:'',
                code:'',
            },
            codeUrl:'',
            returnUrl:[[${returnUrl}]]
        },
        created() {
            this.getCode();
        },
        methods : {
            getCode(){
                var _this=this;
                $.ajax({
                    type : "get",
                    url : "/auth/captchaImage",
                    data : {},
                    async : false,
                    success : function(data){
                        _this.codeUrl = "data:image/gif;base64," + data.img;
                        _this.form.uuid = data.uuid;
                    }
                });

            },
            handLogin(){
                var _this=this;
                $.ajax({
                    type : "post",
                    url : "/login",
                    data: JSON.stringify(_this.form),
                    dataType: "json",
                    contentType: "application/json",
                    //async : false,
                    success : function(data){

                    }
                });
            }
        }
    })
</script>
</body>
</html>